<template>
  <div>
    <el-card class="pageInfo">
      <img src="@/assets/boardImage/bg2.png" style="width: 100%" />
      <div class="page-container">
        <div class="pageInfo-content">
          <div class="top-title">
            <div class="left">
              <div>
                <img
                  src="@/assets/boardImage/Frame31.png"
                  style="width: 100%"
                />
              </div>
              <div class="emergencyPhoneTitle">应急电话</div>
              <div class="emergencyPhone">{{ state.emergencyPhone }}</div>
            </div>
            <div class="center">
              <img src="@/assets/boardImage/Group37.png" style="width: 100%" />
            </div>
            <div class="right">
              <div class="time">{{ state.time }}</div>
              <div class="btn">
                <el-button type="info" round color="#06709C">
                  <el-icon :size="20"><Tools /></el-icon>
                  <span style="color: #d8f4ff">设置</span>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 更多数据 -->
        <div class="center-content">
          <!-- 左侧大块数据 -->
          <div class="left">
            <div class="top">
              <div class="left">
                <el-descriptions :column="1" border>
                  <el-descriptions-item
                    label="通讯设备编码"
                    label-align="left"
                    align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                  >
                    {{ props.modelValue.code }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="设备模式"
                    label-align="left"
                    align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                  >
                    {{ realTime.tags["mode"][props.modelValue.mode] + "模式" }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="center">
                <div class="text">PUE :</div>
                <div>
                  <el-button type="info" color="#444C4D">
                    <span style="color: #00b9b9; font-size: 0.8rem">{{
                      (props.modelValue.pue - 0).toFixed(2)
                    }}</span>
                  </el-button>
                </div>
              </div>
            </div>
            <div class="bottom">
              <img src="@/assets/boardImage/center.png" style="width: 100%" />
              <!-- 数据展示标签 -->
              <div class="tagsOfDataOne">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsOne">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </span>
                </div>
              </div>
              <div class="tagsOfDataTwo">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsTwo">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </span>
                </div>
              </div>
              <div class="tagsOfDataThree">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsThree">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </span>
                </div>
              </div>
              <div class="tagsOfDataFourth">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsFourth">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    <el-tag
                      v-if="item === 'fp1' || item === 'fp2'"
                      :type="
                        props.modelValue[item] === 0
                          ? 'danger'
                          : props.modelValue[item] === 1
                          ? 'success'
                          : 'warning'
                      "
                    >
                      {{ realTime.tags["fp1"][props.modelValue[item]] }}
                      {{ getrightObj(item, "unit") }}
                    </el-tag>
                    <div v-else>
                      {{ props.modelValue[item] }}
                      {{ getrightObj(item, "unit") }}
                    </div>
                  </span>
                </div>
              </div>
              <div class="tagsOfDataFive">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsFive">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </span>
                </div>
              </div>
              <div class="tagsOfDataSix">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsSix">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </span>
                </div>
              </div>
              <div class="tagsOfDataSeven">
                <div class="line"></div>
                <div class="dot"></div>
                <div class="item" v-for="(item, index) in state.filedsSeven">
                  <span>
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </span>
                  <span>
                    <el-tag
                      v-if="item === 'wfp1' || item === 'wfp2'"
                      :type="
                        props.modelValue[item] === 0
                          ? 'danger'
                          : props.modelValue[item] === 1
                          ? 'success'
                          : 'warning'
                      "
                    >
                      {{ realTime.tags["fp1"][props.modelValue[item]] }}
                      {{ getrightObj(item, "unit") }}
                    </el-tag>
                    <div v-else>
                      {{ props.modelValue[item] }}
                      {{ getrightObj(item, "unit") }}
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧表格 -->
          <div class="right">
            <!-- 电力数据 -->
            <div class="ElectricityData">
              <div class="title">
                <div class="text">电力数据</div>
              </div>
              <!-- 内容 -->
              <div class="content">
                <div class="list" v-for="(item, index) in state.controlOne">
                  <div class="title">
                    {{
                      getrightObj(item, "objectName") + " " + item.toUpperCase()
                    }}
                  </div>
                  <div class="value">
                    {{ props.modelValue[item] }}
                    {{ getrightObj(item, "unit") }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 循环泵 -->
            <div class="circulatingPump">
              <div class="title">
                <div class="text">循环泵</div>
              </div>
              <!-- 内容 -->
              <div class="content">
                <div class="list" v-for="(item, index) in state.controlTwo">
                  <div class="title">
                    <div class="filedName">
                      {{
                        getrightObj(item, "objectName") +
                        " " +
                        item.toUpperCase()
                      }}
                    </div>
                    <div class="filedStatus">
                      {{ props.modelValue[item] ? "工作中" : "休息中" }}
                    </div>
                  </div>
                  <div class="value">
                    <div class="filedName">设备操作</div>
                    <div class="filedStatus">
                      <el-switch
                        v-model="props.modelValue[item]"
                        @change="control(item)"
                        :active-value="1"
                        :inactive-value="0"
                        class="ml-2"
                        style="
                          --el-switch-on-color: #13ce66;
                          --el-switch-off-color: #ff4949;
                        "
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 外循环风扇 -->
            <div class="ExternalCirculationFan">
              <div class="title">
                <div class="text">外循环风扇</div>
              </div>
              <!-- 内容 -->
              <div class="content">
                <div class="list" v-for="(item, index) in state.controlThree">
                  <div class="title">
                    <div class="filedName">
                      {{
                        getrightObj(item, "objectName") +
                        " " +
                        item.toUpperCase()
                      }}
                    </div>
                    <div class="filedStatus">
                      {{ props.modelValue[item] ? "工作中" : "休息中" }}
                    </div>
                  </div>
                  <div class="value">
                    <div class="filedName">设备操作</div>
                    <div class="filedStatus">
                      <el-switch
                        v-model="props.modelValue[item]"
                        @change="controlThree(item)"
                        :active-value="1"
                        :inactive-value="0"
                        class="ml-2"
                        style="
                          --el-switch-on-color: #13ce66;
                          --el-switch-off-color: #ff4949;
                        "
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { inject, reactive, onMounted, ref, onBeforeUnmount } from "vue";
import tableHeader from "./tableHeader.vue";
import { useRouter, useRoute } from "vue-router";
import { timeFormat } from "@/utils/common";
import { useIntervalFn } from "@vueuse/core";

const realTime = inject("realTime") as any;
const itemObject = inject("itemObject") as any;
const cabinet = inject("cabinet") as any;
const route = useRoute();
const router = useRouter();

const state: {
  time: string;
  filedsOne: any;
  filedsTwo: any;
  filedsThree: any;
  filedsFourth: any;
  filedsFive: any;
  filedsSix: any;
  filedsSeven: any;
  controlOne: any;
  controlTwo: any;
  controlThree: any;
  emergencyPhone: string;
} = reactive({
  time: "",
  filedsOne: ["t1", "h1", "q1", "p3"],
  filedsTwo: ["t2", "p1"],
  filedsThree: ["t3", "p2"],
  filedsFourth: ["fp1", "fp2"],
  filedsFive: ["wt3"],
  filedsSix: ["wt4"],
  filedsSeven: ["wh1", "wq1", "wfp1", "wfp2"],
  controlOne: ["e1", "e2", "e3", "w1"],
  controlTwo: ["fp1", "fp2", "wfp1", "wfp2"],
  controlThree: ["wf1"],
  emergencyPhone: "",
});

interface Props {
  modelValue: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: {},
});

const getrightObj = (filed: String, property: any) => {
  let value = _.filter(itemObject.fullData, { mqttFiled: filed });
  if (props.modelValue.type) {
    return value[0][property];
  } else {
    return value[0]["objectNameVertical"];
  }
};

//循环泵切换
const control = (Filed: string) => {
  console.log("循环泵切换", Filed);
  switch (Filed) {
    case "fp1":
      //待控制fp1c
      break;
    case "fp2":
      //待控制fp2c
      break;
    default:
      break;
  }
};

const controlThree = (Filed: string) => {
  console.log("外循环风扇", Filed);
  switch (Filed) {
    case "wf1":
      //待控制wf1c
      break;

    default:
      break;
  }
};

//获取机柜详情
const getInfo = () => {
  cabinet.getInfoById(route.query).then((res: any) => {
    state.emergencyPhone = res.emergencyPhone;
  });
};

//计时
const initTime = () => {
  state.time = timeFormat("", "yyyy-mm-dd hh:MM:ss");
};
const { pause, resume, isActive } = useIntervalFn(
  () => {
    initTime();
  },
  1000,
  {
    immediate: true,
  }
);

onMounted(() => {
  //获取机柜详情
  getInfo();
  console.log("实时数据", route);
});

onBeforeUnmount(() => {
  pause();
});
</script>
<style lang="scss" scoped>
@mixin flex($direction, $content, $align) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
  align-items: $align;
}

@mixin box {
  position: absolute;
  // width: 18%;
  @media screen and (min-width: 1440px) {
    width: 18%;
  }
  @media screen and (max-width: 1440px) {
    width: 190px;
  }
  background: rgba(0, 0, 0, 0.7);
  color: #d8f4ff;
  border-radius: 6px 6px 6px 6px;
  .item {
    @include flex(row, space-between, center);
    padding: 5px;
  }
  &:hover {
    z-index: 100;
  }
}
.pageInfo {
  position: relative;
  width: 100%;
  .page-container {
    width: 100%;
    position: absolute;
    padding: var(--el-card-padding);
    top: 0;
    left: 0;
    right: 0;
    .pageInfo-content {
      height: 88px;
      .top-title {
        @include flex(row, space-between, center);
        .left {
          width: 100%;
          @include flex(row, flex-start, center);
          padding-top: var(--el-card-padding);
          margin-left: 2.5rem;
          .emergencyPhoneTitle {
            color: #ff4b23a1;
            font-weight: bold;
            padding-left: 5px;
          }
          .emergencyPhone {
            color: #ff4b23;
            font-weight: bold;
            padding-left: 5px;
            font-size: 1rem;
            font-family: Source Serif 4-Black;
          }
        }
        .center {
          width: 100%;
        }
        .right {
          width: 100%;
          padding-top: var(--el-card-padding);
          @include flex(row, flex-end, center);
          margin-right: 2.5rem;
          .time {
            font-size: 0.8rem;
            color: #003f59;
            font-weight: bold;
            margin-right: var(--el-card-padding);
          }
          .btn {
          }
        }
      }
    }
    .center-content {
      display: flex;
      width: 100%;
      height: 100%;
      .left {
        width: 70%;
        height: 100%;
        margin-left: 2.5rem;
        .top {
          width: 100%;
          @include flex(row, space-around, center);
          .left {
            width: 40%;
            margin: 0;

            :deep(.my-label) {
              color: #026793;
              background: #ceeefa !important;
              border-color: #63c5e4;
            }
            :deep(.my-content) {
              color: #026793;
              background: #e7feff;
              border-color: #63c5e4;
            }
          }
          .center {
            width: 60%;
            @include flex(row, center, center);
            .text {
              font-size: 1rem;
              font-weight: bold;
              color: #026793;
              margin-right: 5px;
            }
          }
        }
        .bottom {
          width: 100%;
          margin-top: 4rem;
          position: relative;
          .tagsOfDataOne {
            @include box;
            left: 2%;
            bottom: -5%;
            .line {
              position: absolute;
              height: 7.8rem;
              width: 1px;
              border: 1px dashed #0071b7;
              bottom: 100%;
              left: 60%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #0071b7;
              border-radius: 100px;
              left: 57.5%;
              bottom: 12rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataTwo {
            @include box;
            left: 25%;
            top: 0%;
            .line {
              position: absolute;
              height: 4.5rem;
              width: 1px;
              border: 1px dashed #ff4b23;
              top: 100%;
              left: 50%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #ff4b23;
              border-radius: 100px;
              left: 47.5%;
              top: 6.5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataThree {
            @include box;
            left: 25%;
            bottom: 10%;
            .line {
              position: absolute;
              height: 4.5rem;
              width: 1px;
              border: 1px dashed #0071b7;
              bottom: 100%;
              left: 60%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #0071b7;
              border-radius: 100px;
              left: 57%;
              bottom: 6.5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataFourth {
            @include box;
            left: 42%;
            .line {
              position: absolute;
              height: 5rem;
              width: 1px;
              border: 1px dashed #ff4b23;
              bottom: 100%;
              left: 90%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #ff4b23;
              border-radius: 100px;
              left: 87%;
              bottom: 7.5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataFive {
            @include box;
            top: 30%;
            left: 65%;
            .line {
              position: absolute;
              height: 4rem;
              width: 1px;
              border: 1px dashed #ff4b23;
              top: 100%;
              left: 50%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #ff4b23;
              border-radius: 100px;
              left: 47.3%;
              top: 5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataSix {
            @include box;
            bottom: 5%;
            left: 65%;
            .line {
              position: absolute;
              height: 2.5rem;
              width: 1px;
              border: 1px dashed #0071b7;
              bottom: 100%;
              left: 60%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #0071b7;
              border-radius: 100px;
              left: 57.3%;
              bottom: 3.5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
          .tagsOfDataSeven {
            @include box;
            left: 82%;
            .line {
              position: absolute;
              height: 2rem;
              width: 1px;
              border: 1px dashed #0071b7;
              bottom: 100%;
              left: 60%;
            }
            .dot {
              position: absolute;
              width: 13px;
              height: 13px;
              background: #0071b7;
              border-radius: 100px;
              left: 57.3%;
              bottom: 6.5rem;
              animation: notify-pulse 1s infinite;
              -webkit-animation: notify-pulse 1s infinite;
            }
          }
        }
      }
      //   右侧表格
      .right {
        margin: 0 2.5rem 0 4rem;
        width: 20%;
        position: relative;
        right: 0;
        .ElectricityData {
          text-align: right;
          background-image: url(@/assets/boardImage/Group66.png);
          background-size: 100% 100%;
          height: 25%;
          .title {
            width: 100%;
            padding: 0 10px;
            .text {
              color: #d8f4ff;
              text-align: left;
              font-size: 0.6rem;
              padding-top: 8px;
            }
            .textright {
              text-align: right;
              font-size: 0.6rem;
              font-weight: bold;
              color: #026793;
            }
          }
          // 内容
          .content {
            width: 100%;
            text-align: left;
            font-size: 0.55rem;
            font-weight: bold;
            .list {
              width: 100%;
              padding: 0.3rem;
              @include flex(row, space-around, center);
              .title {
                width: 80%;
                color: #026793;
              }
              .value {
                width: 20%;
                color: #003f59;
              }
            }
          }
        }
        .circulatingPump {
          // 循环泵
          text-align: right;
          background-image: url(@/assets/boardImage/Group67.png);
          background-size: 100% 100%;
          height: 60%;
          .title {
            width: 100%;
            padding: 0 10px;
            .text {
              color: #d8f4ff;
              text-align: left;
              font-size: 0.6rem;
              padding-top: 8px;
            }
          }
          // 内容
          .content {
            width: 100%;
            padding-top: 0.625rem;
            text-align: left;
            font-size: 0.55rem;
            font-weight: bold;
            .list {
              width: 100%;
              padding: 0.3rem;
              @include flex(column, space-between, center);
              .title {
                color: #026793;
                background-color: #ceeefa;
                padding: 0.25rem 1rem;
                @include flex(row, space-between, center);
                .filedName {
                }
              }
              .value {
                width: 100%;
                height: 2.3rem;
                color: #003f59;
                padding: 0.25rem 1rem;
                @include flex(row, space-between, center);
                border: 1px solid #ceeefa;
              }
            }
          }
        }
        .ExternalCirculationFan {
          // 外循环风扇
          text-align: right;
          background-image: url(@/assets/boardImage/Group66.png);
          background-size: 100% 100%;
          height: 20%;
          .title {
            width: 100%;
            padding: 0 10px;
            .text {
              color: #d8f4ff;
              text-align: left;
              font-size: 0.6rem;
              padding-top: 8px;
            }
          }
          // 内容
          .content {
            width: 100%;
            padding-top: 0.625rem;
            text-align: left;
            font-size: 0.55rem;
            font-weight: bold;
            .list {
              width: 100%;
              padding: 0.3rem;
              @include flex(column, space-between, center);
              .title {
                color: #026793;
                background-color: #ceeefa;
                padding: 0.25rem 1rem;
                @include flex(row, space-between, center);
                .filedName {
                }
              }
              .value {
                width: 100%;
                // height: 2.3rem;
                color: #003f59;
                padding: 0.25rem 1rem;
                @include flex(row, space-between, center);
                border: 1px solid #ceeefa;
              }
            }
          }
        }
      }
    }
  }
}

.OFFLINE {
  margin: 0 auto;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: rgb(150, 150, 150);
}

//心跳效果
@keyframes notify-pulse {
  0% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }

  25% {
    transform: rotate(45deg) scale(1.2, 1.2);
    opacity: 0.5;
  }

  100% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }
}

.ml-2 {
  position: relative;
}
:deep .el-switch.is-checked .el-switch__core .el-switch__action {
  left: calc(100%);
}
</style>
